$maincolor: #6bbcbe;
$red: #F0607B;
$blue: #4DB3E1;
$green: #2E9B64;
$gap: 15px;
$grey: #999;
$light: #ccc;

$font-big: 20px;
$font-normal: 17px;
$font-small: 15px;
$font-little: 12px;

$btn-size: 16px;

html, body {
	font-size: $font-small;
	color: #333; 
	background: #F4F4F4;
  	line-height: 1.411764705882353;
  	max-width: 750PX; /*大写的px不会被转义成rem*/
  	margin: 0 auto;
}

.main-color {
	color: $maincolor!important;
}

.red {
	color: $red;
}
.blue {
	color: $blue;
}

.green {
	color: $green;
}

.grey {
	color: $grey;
}

.light {
	color: $light;
}

.black {
	color: #333;
}
.x-small {
	font-size: $font-small!important;
}
.x-big {
	font-size: $font-big!important;
}
.x-little {
	font-size: $font-little!important;
}
.align-left {
	text-align: left!important;
}
.align-right {
	text-align: right!important;
}

%flex-row {
	display: flex;
	flex-direction: row;
}

%flex-col {
	display: flex;
	flex-direction: column;
}

%border-top-1px {
	position: relative;

	&:before {
		content: '';
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		top: 0;
		background: #F9F9F9;
		transform: scaleY(.5);
	}
} 

%border-bottom-1px {
	position: relative;

	&:after {
		content: '';
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #F9F9F9;
		transform: scaleY(.5);
	}
}

.mint-loadmore-bottom {
	@extend %border-top-1px;
	background: #fff;
}

.input-clear {
	position: absolute;
	right: 10px; 
	width: 16px;
	height: 100%;
	font-size: 16px; 
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc; 
	border-radius: 50%;
}

.hidden-submit-btn {
	position: absolute;
	top: -10000px;
	left: -10000px;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
	z-index: -1000;
}

.fade-enter-active,
.fade-leave-active {
	transition: all .2s;
}

.fade-enter-to,
.fade-leave {
	opacity: 1;
	z-index: 100;
}

@mixin limit-line ($num) {
	display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
    overflow: hidden; 
	text-overflow: ellipsis;
} 

.limit-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.weui-tabbar {
	@extend %border-top-1px;
}

button {
	border: none;
	outline: none;
	font-size: inherit;
}

.bottom-border {
	@extend %border-bottom-1px;
	display: block;
}

.x-list-wrap {
	background: #fff; 
	width: 100%; 
	padding-left: 15px; 

	&.multiple {
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 13px;
		color: #999999;
		margin-top: 10px;
	}

	.x-list,
	.x-input-list {
		padding-left: 0;
	}
}

.x-list {
	width: 100%;
	height: 50px;
	background: #fff;
	@extend %flex-row;
	@extend %border-bottom-1px;
	justify-content: space-between; 
	align-items: center;
	padding-left: 15px;
	padding-right: 15px;
	color: #333;

	&.width-icon {
		overflow: hidden;

		&:after {
			left: 37px;
		}
	}

	&.width-textarea {
		height: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	&:last-child {
		
		&:after {
			display: none;
		}
	}

	.icon {
		width: 22px;
		height: 22px;
		line-height: 22px;
		font-size: 22px;
		margin-right: 15px;
	}

	.name {
		width: 79px;
		margin-right: 4px;
		flex-shrink: 0;
		font-size: $font-normal;
		display: flex;
		align-items: center;

		&.big-font {
			font-size: 17px;
			color: #333;
		}
	}

	.val {
		flex-grow: 1; 
		color: $grey;
		font-size: $font-small;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		overflow: hidden;

		input {
			width: 100%;
			display: block;
		}

		textarea {
			width: 100%;
			height: 60px;
			resize: none; 
			border: 1px solid #E5E5E5;
			border-radius: 3px; 
			padding: 8px 10px;
		}
	}

	.arrow {
		font-size: 16px;
		width: 8px;
		margin-left: 10px;
		color: #ccc;
	}

	&.head-img {
		height: 80px;

		.val {
			display: flex;
			justify-content: flex-end;

			img {
				width: 64px;
				height: 64px;
				border-radius: 50%;
			}
		}
	}
}

.x-input-list {
	$h: 50px;
	width: 100%;
	@extend %flex-row;
	@extend %border-bottom-1px;
	justify-content: space-between;
	align-items: center;
	height: $h;
	background: #fff;
	padding: 0 $gap;

	&.center {
		justify-content: center;
	}

	.left-cont {
		// width: 40%;
		flex-shrink: 0;
		font-size: 16px; 
		@extend %flex-row;
		align-items: center;
		height: 100%;
		margin-right: 15px;

		i {
			margin-right: 13px;
			font-size: 25px;
		}
	}

	>input {
		flex-grow: 1;
		height: 100%;
		width: 150px;
		font-size: $font-normal;
	}

	.right-cont {
		width: 55%;
		flex-shrink: 0;
		@extend %flex-row;
		justify-content: flex-end;
		align-items: center;
		height: 100%;

		.limit-line-1 {
			@extend .limit-line;
		}

		>input {
			width: 100%;
			height: 100%;
			line-height: $h;
			text-align: right;
		}

		>i {
			position: relative;
			right: -3px;
			@extend %flex-row;
			align-items: center;
			color: #999;
			font-size: 14px;
		}

		>.opt-btn {
			display: block;
			border: 1px solid #CCCCCC;
			border-radius: 61px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			width: 80px;
		}
	}

	.code {
		width: 85px;
		flex-shrink: 0;
		margin-left: 10px;
		color: $maincolor;
		font-size: $font-small;
	}
}

.x-btn-wrap {
	width: 100%;
	padding: 31px 20px;
}

.x-btn {
	outline: none;
	border: none;
	border-radius: 62px;;
	background: $maincolor;   
	text-align: center;
	color: #fff;
	height: 44px;
	line-height: 44px;
	font-size: $btn-size; 
	width: 100%;
	display: block;

	&[disabled], 
	&.disabled {
		background: #ccc;
	}

	&:active {
		opacity: .8;
	}
}

.baby-btn-wrap {
	@extend .x-btn-wrap;
	padding: 0.6rem 0.8rem;
	background: #fff;
}

.x-btn-green {
	@extend .x-btn;
	border: 1px solid #6BBCBE;
	background: #fff;
	color: $maincolor;
}


.x-fixed-footer {
	background: #fff;
	position: fixed;
	z-index: 100;
	width: 100%;
	padding: 6px 8px;
	bottom: -1px;
	@extend %flex-row;
	justify-content: space-between;
	align-items: center;

	.x-btn {
		width: 100%;
		height: 44px;
		display: block;
	}

	.blue-border {
		border: 1px solid $blue;
		color: $blue;
		background: #fff;
	} 

	&.course-detail-opt {
		height: 50px;
		padding: 0;

		.total-price {
			padding-left: 15px;
			color: #999999;

			span {
				/* color: $maincolor;*/
				color: #333333;

				.x-big {
					line-height: 1; 
				}
			}
		}

		.pay-opt {
			width: 172px;
			height: 100%;
			text-align: center;
			background: $maincolor;
			line-height: 50px;
			color: #fff;

			&:active {
				opacity: .8;
			}
		}
	}
}

.multiple-list { 
	padding: 15px 10px 10px;
	line-height: 1.4285;

	>p {
		margin-bottom: 5px;
	}

	.list {
		margin-bottom: 5px;
	}
}
 
